<template>
  <el-card>
    <!-- 树形控件，设置可选择，默认展开,ref、node-key，设置默认勾选菜单-->
    <el-tree
      :default-checked-keys="defaultCheckedKeys"
      ref="tree"
      node-key="id"
      :data="data"
      :props="defaultProps"
      default-expand-all
      show-checkbox/>
    <div style="margin: 20px">
      <el-button @click="empty">清空</el-button>
      <el-button type="primary" @click="preservation">保存</el-button>
    </div>
  </el-card>
</template>

<script>
// 引入 获取全部菜单层级,分配菜单保存，获取用户已拥有菜单
import { getMenuNodeList, allocateRoleMenus, getRoleMenus } from '@/services/menu'
export default {
  // 参数
  props: ['id'],
  // 命名
  name: 'assignment',
  data () {
    return {
      // 树形控件数据
      data: [],
      // 对应关系
      defaultProps: {
        children: 'subMenuList',
        label: 'name'
      },
      // 保存传递参数
      user: {
        roleId: '',
        menuIdList: []
      },
      // 用户已拥有菜单id数组
      defaultCheckedKeys: []
    }
  },
  // 钩子函数
  created () {
    // 调用方法获取全部层级
    this.getList()
    // 获取已拥有菜单
    this.getUserMenu()
  },
  methods: {
    // 清空勾选列表
    empty () {
      // 调用树形结构方法，传入空数组清空列表
      this.$refs.tree.setCheckedKeys([])
    },
    // 遍历全部数组筛选选中的菜单
    screenMenu (data) {
      // 遍历数组
      data.forEach(item => {
        // 如果selected为false，直接返回
        if (!item.selected) {
          return
        }
        // 如果还有子列表，递归调用
        if (item.subMenuList) {
          return this.screenMenu(item.subMenuList)
        }
        // 如果值为true并且没有子菜单，则将id添加到数组中（这里使用ed6语法，因为push会导致不显示）
        this.defaultCheckedKeys = [...this.defaultCheckedKeys, item.id]
      })
    },
    // 获取用户拥有的菜单
    async getUserMenu () {
      // 调用接口获取数据
      const { data } = await getRoleMenus(this.id)
      if (data.code === '000000') {
        // 如果获取数据成功否，调用遍历方法获取全部已拥有菜单
        this.screenMenu(data.data)
      }
    },
    // 保存按钮事件函数
    async preservation () {
      // 设置需要上传的参数
      this.user.menuIdList = this.$refs.tree.getCheckedKeys()
      this.user.roleId = this.id
      // 调用接口
      const { data } = await allocateRoleMenus(this.user)
      if (data.code === '000000') {
        // 如果操作成功，弹出提示。返回角色列表页面
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        this.$router.push('/role')
      }
    },
    // 获取全部菜单层级
    async getList () {
      const { data } = await getMenuNodeList()
      if (data.code === '000000') {
        // 获取成功将全部层级数据交给树形控件
        this.data = data.data
      }
    }
  }
}
</script>
